<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
</head>

<body>
  <div id="app">
    <div class="container">
      <!-- 搜索 -->
      <form class="form-inline" style="padding: 20px 0">
        <input v-model="key" type="text" class="form-control" placeholder="输入关键字进行搜索">
      </form>
      <!-- 表格 -->
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time}}</td>
            <td><a @click.prevent="delBrand(item.id)" href="#">删除</a></td>
          </tr>
          <tr v-if="list.length===0">
            <td colspan="4" style="text-align: center;">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <!-- 添加品牌 -->
      <form @submit.prevent="addBrand()" class="form-inline">
        <input v-model="brandName" type="text" class="form-control" placeholder="品牌名称">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn btn-primary">添加品牌</button>
      </form>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script src="./axios.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 品牌列表数据
        list: [],
        // 名称
        brandName: '',
        // 搜索关键字
        key: ''
      },
      watch: {
        // 侦听key数据的变化
        key () {
          axios.get('http://localhost:3000/brands',{
            params: { name_like: this.key }
          }).then(res=>{
            this.list = res.data
            // 修改list数据为查询到的新数组
            // 数据驱动视图，表格也会更新好
          })
        }
      },
      created () {
        // vue实例后执行（回调函数，钩子函数），在某个时机会被调用的函数。
        this.getBrands()
      },
      methods: {
        // 获取列表数据
        getBrands () {
          axios.get('http://localhost:3000/brands').then(res=>{
            // res.data 就是后的想要数据，品牌列表
            this.list = res.data
          })
        },
        // 删除品牌函数
        delBrand (id) {
          // 确认框
          if (confirm('您确认删除该品牌吗？')) {
            // 发请求
            axios.delete(`http://localhost:3000/brands/${id}`).then(()=>{
              // 成功了
              // 更新列表
              this.getBrands()
            })
          }
        },
        // 添加品牌函数
        addBrand () {
          // 校验
          if (!this.brandName.trim()) {
            return alert('请输入品牌名称')
          }
          // 数据(字段名称需要和后台接口需要的字段名称保持一致)
          const data = {
            name: this.brandName,
            time: new Date()
          }
          // 请求
          axios.post('http://localhost:3000/brands',data).then(()=>{
            // 成功
            this.getBrands()
            // 清空
            this.brandName = ''
          })
        }
      }
    })
  </script>
</body>
</html>